<!-- 任务执行 -->
<template>
  <div style="float: right;">
    <el-space>
      <el-tooltip
        content="模板下载"
        placement="top-start"
      >
        <el-button
          circle
          :icon="Document"
          :loading="templateDisabled"
          @click="templateDownload"
        />
      </el-tooltip>

      <el-tooltip
        content="批量上传"
        placement="top"
      >
        <el-button
          circle
          :icon="UploadFilled"
          @click="handleUpload"
        />
      </el-tooltip>

      <el-tooltip
        content="批量下载"
        placement="top-end"
      >
        <el-button
          circle
          :icon="Download"
          @click="handleDownload"
        />
      </el-tooltip>
    </el-space>

    <ql-dialog
      v-model="taskShow"
      title="文件信息"
      :confirm="confirm"
      :destroy-on-close="true"
      @open="handleDialogOpen"
      @closed="handleDialogClosed"
    >
      <ql-form-list
        ref="form"
        v-model="formData"
        :options="options"
        :col="{ xs: 24, sm: 12, md: 12, lg: 12}"
      >
        <template #uploadFile>
          <el-upload
            ref="upload"
            drag
            :action="themeStore.url + '/task/upload'"
            :headers="{ DT_TOKEN: userStore.token }"
            :limit="1"
            :on-success="handleEditSuccess"
          >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">
              拖拽文件或 <em>点击上传</em>
            </div>
          </el-upload>
        </template>
      </ql-form-list>
    </ql-dialog>
  </div>
</template>
<script>
import { Document, Download, UploadFilled } from '@element-plus/icons-vue'
import useUserStore from '@/store/user'
import useThemeStore from '@/store/theme'
import { taskModDownload, taskSave } from '@/api/task'
import fileDownload from 'js-file-download'

export default {
  name: 'AppTask'
}
</script>
<script setup>
const props = defineProps({
  // 查询数据
  data: {
    type: Object,
    default: () => {}
  },
  // UPLOAD_TASK_WAYBILL 运单
  // UPLOAD_TASK_DRIVER 司机
  // UPLOAD_TASK_CAR 车辆
  // UPLOAD_TASK_CARRIER 车队长
  type: {
    type: String,
    default: ''
  }
})

// 模板下载
const templateDisabled = ref(false)
const templateDownload = async () => {
  templateDisabled.value = true
  const blob = await taskModDownload({ type: props.type }).finally(() => {
    templateDisabled.value = false
  })
  fileDownload(blob, 'template.xlsx')
}

// 弹框相关
const taskShow = ref(false)
const options = ref([
  {
    label: '上传文件',
    key: 'uploadFile',
    type: 'slot',
    rule: [{
      required: true,
      message: '请选择要上传的文件',
      trigger: 'change'
    }]
  },
  {
    label: '任务描述',
    key: 'des',
    type: 'input',
    rule: [{
      required: true,
      message: '请填入任务描述',
      trigger: 'blur'
    }]
  }
])

const themeStore = useThemeStore()
const userStore = useUserStore()

const formData = reactive({
  facType: props.type,
  type: 0,
  status: 0,
  uploadFile: '',
  des: '',
  downParam: ''
})
// 上传
const handleUpload = () => {
  formData.type = 1
  taskShow.value = true
}

const handleEditSuccess = (response) => {
  formData.uploadFile = response.data
}

// 批量下载
const handleDownload = () => {
  formData.type = 2

  const obj = {
    ...props.data
  }
  if (obj.createAt && obj.createAt.length) {
    obj.startTime = obj.createAt[0]
    obj.endTime = obj.createAt[1]
  }

  formData.downParam = JSON.stringify(obj)
  taskShow.value = true
}

const form = ref(null)
const confirm = async () => {
  await form.value?.validate()
  await taskSave(formData)
  ElMessage.success('任务创建成功')
  taskShow.value = false
}

const handleDialogOpen = async () => {
  await nextTick()
  form.value?.isHide('uploadFile', formData.type === 2)
}

const handleDialogClosed = () => {
  form.value?.resetFields() // 清除表单数据
}
</script>

<style scoped lang='scss'>

</style>
